<template>
    <div class="page" ref="containerRef">
        <Breadcrumb :route="routes" />
        <div class="wb-container">
            <div class="page-content transparent">
                <!-- 商场信息 -->
                <el-row class="row">
                    <el-col :span="8" :xs="24" :sm="24" :md="8" class="col-md-4">
                        <div class="ibox h300">
                            <div class="ibox-title">
                                <h5><i class="icow icow-shop"></i>商城信息</h5>
                            </div>
                            <div class="ibox-content">
                                <ul class="fui-cell-group">
                                    <li class="fui-cell">商城名称：<span class="text">智慧零售</span></li>
                                    <li class="fui-cell">商城介绍：<span
                                            class="text">四川智谷盛世科技有限公司以"无人售货，自助购物"销售模式为理念的全新创业致富加盟项目;主要包含三种模式"无人自助超市""无人售货店(橱窗型)""无人售货店(触屏型)"以满足市场需求。</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </el-col>
                    <!-- 商场数据展示 -->
                    <el-col :span="16" :xs="24" :sm="24" :md="16" class="col-md-8">
                        <div class="ibox h300">
                            <div class="ibox-content  no-border">
                                <ul class="fui-list-group">
                                    <li class="fui-list">
                                        <router-link to="/list" class="a">
                                            <div class="fui-list-media">
                                                <span class="icow text-info icow-goodsL"></span>
                                            </div>
                                            <div class="fui-list-inner">
                                                <h5 class="goods_totals">0</h5>
                                                <p>全部商品</p>
                                            </div>
                                        </router-link>
                                    </li>
                                    <li class="fui-list">
                                        <router-link to="/orderList" class="a">
                                            <div class="fui-list-media">
                                                <span class="icow text-green icow-fahuo"></span>
                                            </div>
                                            <div class="fui-list-inner">
                                                <h5 class="order_status1">0</h5>
                                                <p>全部订单</p>
                                            </div>
                                        </router-link>
                                    </li>
                                    <li class="fui-list">
                                        <router-link to="/MerchantWithdrawal" class="a">
                                            <div class="fui-list-media">
                                                <span class="icow text-warning icow-shenhe"></span>
                                            </div>
                                            <div class="fui-list-inner">
                                                <h5 class="finance_total">0</h5>
                                                <p>待审核提现</p>
                                            </div>
                                        </router-link>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </el-col>
                </el-row>
                <el-row class="row">
                    <!-- 订单概述 -->
                    <el-col :span="12" :xs="24" :sm="24" :md="12">
                        <div class="col-md-6-1">
                            <div class="ibox" style="position: relative;">
                                <div class="ibox-title">
                                    <h5><i class="icow"></i>订单概述</h5>
                                    <div class="demo-tabs" ref="dataTabs">
                                        <ul>
                                            <li v-for="(i, index) in dateList" :key="index"
                                                :class="{ tabcolor: activeTab === index }" @click="dateClick(index)">{{
                                                    i.name
                                                }}</li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="ibox-content">
                                    <div class="tab-content" style="height: auto;">
                                        <div class="tab-pane active" id="order_count_0">
                                            <div class="fui-list-group">
                                                <div class="fui-list no-padding">
                                                    <div class="fui-list-inner">
                                                        <h4 class="text-warning order_count_0 _popover-tips"
                                                            data-content="成交量：已付款订单数<br>交易量：下单总数（含未付款订单）"
                                                            data-original-title="" title="">0/0</h4>
                                                        成交量/交易量(单)
                                                    </div>
                                                </div>
                                                <div class="fui-list no-padding">
                                                    <div class="fui-list-inner">
                                                        <h4 class="text-warning order_price_0 _popover-tips"
                                                            data-content="成交额：已付款订单金额（含运费）<br>交易额：下单总额（含运费）"
                                                            data-original-title="" title="">0.00/0.00
                                                        </h4>
                                                        成交额/交易额(元)
                                                    </div>
                                                </div>
                                                <div class="fui-list no-padding">
                                                    <div class="fui-list-inner">
                                                        <h4 class="text-warning order_avg_0 _popover-tips"
                                                            data-content="成交额/下单去重会员数（含维权订单）" data-original-title=""
                                                            title="">
                                                            0.00</h4>
                                                        人均消费(元)
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="line-chart">
                                <div class="ibox-content">
                                    <div ref="divDom" style="height: 100%;"></div>
                                </div>
                            </div>
                        </div>
                    </el-col>
                    <!-- 商品销量排行 -->
                    <!--  -->
                    <el-col :span="12" :xs="24" :sm="24" :md="12">
                        <div class="col-md-6-2">
                            <div class="ibox h300">
                                <div class="ibox-title">
                                    <h5><i class="icow"></i>设备订单排行</h5>
                                    <div class="demo-tabs" ref="dataGoodsTabs">
                                        <ul>
                                            <li v-for="(i, index) in dateGoodsList" :key="index"
                                                :class="{ tabcolor: activeTabGoods === index }"
                                                @click="dateGoodsClick(index)">
                                                {{
                                                    i.name
                                                }}</li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="ibox-content">
                                    <div class="tab-content relative">
                                        <div class="ibox-loading" id="goods-rank-loading" style="display: none;"></div>
                                        <div class="tab-pane active" id="goods_rank_0">
                                            <el-table :data="tableData" style="width: 100%;height: 400px;">
                                                <el-table-column prop="date" label="排名" />
                                                <el-table-column prop="date" label="设备名称" />
                                                <el-table-column prop="date" label="订单数量" />
                                                <el-table-column prop="name" label="订单金额" />
                                            </el-table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
        <!--微擎版权-->
        <div class="container-fluid footer text-center copyright-footer" role="footer">
            <div class="copyright"></div>
        </div>
        <!-- <div class="screen"><el-button @click="screenshot">屏幕截图</el-button></div> -->
    </div>
</template>

<script setup>
import { ref, onMounted, reactive } from "vue";
import { useRoute, useRouter } from "vue-router";
import Breadcrumb from '@/components/nav-header'
import { ElRow, ElTable } from 'element-plus';
import * as echarts from 'echarts';
import option from '@/utlis/line';
import html2canvas from 'html2canvas';

const route = useRoute()
const router = useRouter()
const routes = ref()
const divDom = ref()
const dataTabs = ref()
const dataGoodsTabs = ref()
const activeTab = ref(0)
const activeTabGoods = ref(0)
const containerRef = ref()
const base64img = ref(null)
const dateList = reactive([
    {
        name: '今日',
        value: 1
    },
    {
        name: '昨日',
        value: 2
    },
    {
        name: '最近七日',
        value: 3
    },
    {
        name: '更多',
        value: 4
    },
])
const dateGoodsList = reactive([
    {
        name: '今日',
        value: 1
    },
    {
        name: '昨日',
        value: 2
    },
    {
        name: '最近七日',
        value: 3
    },
    {
        name: '更多',
        value: 4
    },
])
const tableData = [
    {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-04',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
]

onMounted(() => {
    console.log(router.value, '全部的路由');
    routes.value = route.matched
    var myChart = echarts.init(divDom.value);
    option && myChart.setOption(option);
})
const dateClick = (index) => {
    console.log(index, '那个时间');
    activeTab.value = index
}
const dateGoodsClick = (index) => {
    activeTabGoods.value = index
}
const screenshot = async () => {
    try {
        // 获取需要截图的DOM节点
        const elementToScreenshot = containerRef.value;
        // 调用 html2canvas 函数生成截图并保存为 base64 格式的图片
        const canvas = await html2canvas(elementToScreenshot).then((canvasUrl) => {
            const base64 = canvasUrl
                .toDataURL()
                .replace(/^data:image\/(png|jpg);base64,/, '')
            base64img.value = `data:image/png;base64,${base64}`
            if (window.navigator.msSaveOrOpenBlob) {
                let bstr = atob(base64img.value.split(",")[1]);
                let n = bstr.length;
                let u8arr = new Uint8Array(n);
                while (n--) {
                    u8arr[n] = bstr.charCodeAt(n);
                }
                let blob = new Blob([u8arr]);
                window.navigator.msSaveOrOpenBlob(blob, "屏幕截图" + "." + "pdf");
            } else {
                // 这里就按照chrome等新版浏览器来处理
                let a = document.createElement("a");
                a.href = base64img.value;
                a.setAttribute("download", "屏幕截图");
                a.click();
            }
        })
        console.log("截图结果：", base64img.value);
    } catch (error) {
        console.error("截图失败：", error);
    }
};
</script>


<style lang="less" scoped>
.page {
    position: relative;

    .screen {
        position: absolute;
        bottom: 60px;
        right: 0;
    }
}

.wb-container {
    background: #f5f7f9;
    display: block;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    height: calc(100vh - 90px);


    .page-header {
        display: block;
        height: 50px;
        line-height: 50px;
        font-size: 12px;
        position: relative;
        padding-left: 28px;
        margin: 0;
        border: none;
        overflow: hidden;

        ::before {
            content: " ";
            position: absolute;
            left: 20px;
            top: 18px;
            width: 2px;
            height: 16px;
            border-left: 2px solid #44abf7;
            color: #44abf7;
            -webkit-transform-origin: 0 0;
            -ms-transform-origin: 0 0;
            transform-origin: 0 0;
        }
    }

    .page-content.transparent {
        background: transparent;
        padding: 0;
    }

    .page-content {
        margin-bottom: 0;
        background: #fff;
        position: relative;
        height: auto;
        overflow: hidden;
        padding: 10px 30px 0 30px;
    }
}

.wb-container::-webkit-scrollbar {
    width: 4px;
    height: 4px;
    background-color: rgba(0, 0, 0, 0.1);
}

.wb-container::-webkit-scrollbar-thumb {
    background-color: #888;
}

.wb-container::-webkit-scrollbar-track {
    background-color: #F5F5F5;
}


.text-primary {
    color: #44abf7 !important;
}

.row {
    margin-right: -10px;
    margin-left: -10px;


    .col-md-4 {
        position: relative;
        min-height: 1px;
        padding-right: 10px;
        padding-left: 10px;

        .ibox.h300 {
            min-height: 200px;
        }

        .ibox {
            margin-bottom: 20px;
            margin-top: 0;
            padding: 0;
            background: #fff;
            height: auto;
            position: relative;

            .ibox-title {
                -moz-border-bottom-colors: none;
                -moz-border-left-colors: none;
                -moz-border-right-colors: none;
                -moz-border-top-colors: none;
                background-color: #ffffff;
                border-color: #efefef;
                -webkit-border-image: none;
                -o-border-image: none;
                border-image: none;
                border-width: 4px 0px 0;
                color: inherit;
                margin-bottom: 0;
                padding: 0 15px;
                line-height: 48px;
                height: 48px;
                display: flex;
                justify-content: space-between;


                h5 {
                    margin: 0;
                    height: 48px;
                    line-height: 48px;
                }

                .modify {
                    height: 48px;
                    border-bottom: none;

                    .text-primary {
                        color: #44abf7 !important;
                    }
                }

                .icow {
                    margin-left: 6px;
                    margin-right: 4px;
                }
            }

            .ibox-content {
                background-color: #ffffff;
                color: inherit;
                padding: 15px 20px 20px 20px;
                border-color: #e7eaec;
                -webkit-border-image: none;
                -o-border-image: none;
                border-image: none;
                border-style: solid solid none;
                border-width: 1px 0px;
                margin: 0 15px;

                .fui-cell {
                    border: none;
                    background-color: inherit;
                    border-top: 1px solid #efefef;
                    display: block;
                    margin-bottom: -1px;
                    padding: 25px 0px;
                    position: relative;
                }

                .fui-cell:first-child {
                    border: none;
                }
            }
        }
    }

    .col-md-8 {
        position: relative;
        min-height: 1px;
        padding-right: 10px;
        padding-left: 10px;

        .ibox-content {
            background-color: #ffffff;
            color: inherit;
            padding: 15px 20px 20px 20px;
            border-color: #e7eaec;
            -webkit-border-image: none;
            -o-border-image: none;
            border-image: none;
            border-style: solid solid none;
            border-width: 1px 0px;
            margin: 0 15px;

            .fui-list-group {
                display: -webkit-box;
                display: -webkit-flex;
                display: -moz-box;
                display: -ms-flexbox;
                display: flex;
                border-bottom: 1px solid #e6ecf1;

                .fui-list {
                    -webkit-box-flex: 1;
                    -webkit-flex: 1;
                    -moz-box-flex: 1;
                    -ms-flex: 1;
                    flex: 1;
                    -webkit-box-sizing: border-box;
                    -moz-box-sizing: border-box;
                    padding: 38px 10px 20px;

                    .a {
                        display: -webkit-box;
                        display: -webkit-flex;
                        display: -moz-box;
                        display: -ms-flexbox;
                        display: flex;
                        width: 100%;
                        height: 100%;
                    }


                    .fui-list-media {
                        border-left: 1px solid #e6ecf1;
                        padding-left: 23px;
                    }

                    .fui-list-inner {
                        -webkit-box-flex: 1;
                        -webkit-flex: 1;
                        -moz-box-flex: 1;
                        -ms-flex: 1;
                        flex: 1;
                        -webkit-box-sizing: border-box;
                        -webkit-box-sizing: border-box;
                        -moz-box-sizing: border-box;
                        text-align: center;

                        h5 {
                            font-size: 20px;
                            line-height: 38px;
                            font-family: inherit;
                            font-weight: 400;
                        }

                        p {
                            font-size: 12px;
                        }
                    }
                }

                .fui-list:nth-child(1) .fui-list-media {
                    border: none;
                }

                .icow {
                    font-size: 28px;
                    vertical-align: middle;
                }
            }

        }

        .ibox-content.no-border {
            border: none
        }
    }

}

.text-info {
    color: #3abbdb !important;
}

.text-warning {
    color: #ffc000 !important;
}

.text-green {
    color: #15d2b9 !important;
}

.tabcolor {
    color: #409eff;
}

.icow-goodsL::before {
    content: "\e621";
}

.icow-fahuo ::before {
    content: "\e673";
}

.icow-tuihuo::before {
    content: "\e614";
}

.cow-shenhe::before {
    content: "\e651";
}

.ibox.h300 {
    min-height: 200px;
}

.ibox {
    margin-bottom: 20px;
    margin-top: 0;
    padding: 0;
    background: #fff;
    height: auto;
    position: relative;
}

.text {
    color: #999;
}

.row::before {
    display: table;
    content: " ";
}

//订单概述
.row .col-md-6-1 {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;

    .ibox {
        margin-bottom: 20px;
        margin-top: 0;
        padding: 0;
        background: #fff;
        height: auto;
        position: relative;
        display: flex;
        flex-direction: column;

        //顶部日期部分
        .ibox-title {
            -moz-border-bottom-colors: none;
            -moz-border-left-colors: none;
            -moz-border-right-colors: none;
            -moz-border-top-colors: none;
            background-color: #ffffff;
            border-color: #efefef;
            -webkit-border-image: none;
            -o-border-image: none;
            border-image: none;
            border-width: 4px 0px 0;
            color: inherit;
            margin-bottom: 0;
            padding: 0 15px;
            line-height: 48px;
            height: 48px;
            display: flex;
            justify-content: space-between;

            .icow {
                margin-left: 6px;
                margin-right: 4px;
            }

            ul li a {
                padding: 15px 0;
            }

            .nav-tabs {
                border-color: #efefef;
                border-bottom: 1px solid #ddd;

                li {
                    float: left;
                    margin-bottom: -1px;

                    a {
                        border: none !important;
                        position: relative;
                    }
                }

                li.active>a {
                    color: #555;
                    cursor: default;
                    background-color: #fff;
                    border: 1px solid #ddd;
                    border-bottom-color: transparent;
                }
            }

            .demo-tabs {
                ul {
                    height: 100%;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                }

                ul li {
                    padding: 0px 20px;
                    cursor: pointer;
                }

                ul li:hover {
                    color: #409eff;
                }
            }
        }

        .nav {
            padding-left: 0;
            margin-bottom: 0;
            list-style: none;

            li {
                position: relative;
                display: block;

                a {
                    padding: 0;
                    padding: 10px 10px;
                    margin: 0px 15px;
                    color: #666;
                }
            }
        }

        //中间交易数据部分
        .ibox-content {
            background-color: #ffffff;
            color: inherit;
            padding: 15px 20px 20px 20px;
            border-color: #e7eaec;
            -webkit-border-image: none;
            -o-border-image: none;
            border-image: none;
            border-style: solid solid none;
            border-width: 1px 0px;
            margin: 0 15px;

            .tab-content {
                height: 296px;

                .tab-pane {
                    margin-top: 10px;

                    .fui-list-group {
                        border-bottom: 0;
                    }
                }

                .active {
                    display: block;
                }
            }
        }

        .fui-list-group {
            display: -webkit-box;
            display: -webkit-flex;
            display: -moz-box;
            display: -ms-flexbox;
            display: flex;
            justify-content: space-around;
            align-items: center;
            border-bottom: 1px solid #e6ecf1;
        }


        .fui-list.no-padding {
            padding-top: 0 !important;
        }

        .fui-list {
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            -moz-box-flex: 1;
            -ms-flex: 1;
            flex: 1;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            padding: 38px 10px 20px;
        }

        .fui-list-inner {
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            -moz-box-flex: 1;
            -ms-flex: 1;
            flex: 1;
            -webkit-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            text-align: center;
            font-size: 12px;

            h4 {
                font-size: 24px;
                line-height: 25px;
                margin-top: 15px;
                font-weight: lighter;
            }
        }

        .nav-tabs>li.active>a::before {
            content: '';
            position: absolute;
            width: 100%;
            border-top: 2px solid #44abf7;
            left: 0;
            bottom: 0;
        }


    }

    //折线图
    .line-chart .ibox-content {
        height: 300px;
        margin-bottom: 20px;
        background-color: #f0f0f0;
        padding: 20px;
    }
}

//商品销量排行
.col-md-6-2 {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;

    .ibox-title>ul {
        height: 48px;
        border-bottom: none;
        display: flex;
    }

    .ibox-title {
        -moz-border-bottom-colors: none;
        -moz-border-left-colors: none;
        -moz-border-right-colors: none;
        -moz-border-top-colors: none;
        background-color: #ffffff;
        border-color: #efefef;
        -webkit-border-image: none;
        -o-border-image: none;
        border-image: none;
        border-width: 4px 0px 0;
        color: inherit;
        margin-bottom: 0;
        padding: 0 15px;
        line-height: 48px;
        height: 48px;
        display: flex;
        justify-content: space-between;

        .icow {
            margin-left: 6px;
            margin-right: 4px;
        }

        ul li a {
            padding: 15px 0;
        }

        h5 {
            margin: 0;
            height: 48px;
            line-height: 48px;
            font-size: 12px;

            ul {
                height: 48px;
                border-bottom: none;
            }

            .nav-tabs {
                border-color: #efefef;
                border-bottom: 1px solid #ddd;

                li {
                    margin-bottom: -1px;

                    a {
                        border: none !important;
                        position: relative;

                    }
                }

                li.active>a {
                    color: #555;
                    cursor: default;
                    background-color: #fff;
                    border: 1px solid #ddd;
                    border-bottom-color: transparent;
                }
            }



            .nav {
                padding-left: 0;
                margin-bottom: 0;
                list-style: none;

                li {
                    position: relative;
                    display: block;

                    a {
                        padding: 0;
                        padding: 10px 10px;
                        margin: 0px 15px;
                        color: #666;
                    }
                }
            }
        }

        .demo-tabs {
            ul {
                height: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }

            ul li {
                padding: 0px 20px;
                cursor: pointer;
            }

            ul li:hover {
                color: #409eff;
            }
        }
    }
}

:deep(.el-tabs__nav.is-top) {
    height: 50px;
}

.copyright-footer {
    background: #fff;
    border-radius: 4px;
    // margin: 20px 0 0 0;
    padding: 20px 0;
    // height: 20px;
    line-height: 20px;
    color: #999;
    font-size: 12px;
}
</style>